.search-input {
    @extend .mb-2;
    ::placeholder {
        color: $text-muted;
    }
    .search-clear,
    .search-loading {
        @extend .mr-2;
        position: relative;
        display: inline-block;
        float: right;
        margin-top: -25px;
        font-size: 1.4em;
        color: $text-muted;
    }
    .search-clear:hover {
        color: $brand-info;
        cursor: pointer;
    }
    .search-loading {
        display: none;
    }
    .search-query {
        @extend .px-3;
        @extend .py-1;
        width: 100%;
        display: inline-block;
        font-size: $font-size-base;
        line-height: $line-height-base;
        color: $text-color;
        border: $border-default;
        @include border-radius($border-radius-extralarge);
        max-width: auto;
        background: $white;
    }
    .search-query:focus {
        border-color: $brand-info;
        outline: 0;
    }
}
